<template>
  <a-modal v-model="showUploadLoading" :maskClosable="false" :footer="false" :closable="false" :dialog-style="{ top: '200px' }">
    <p class="export-text" v-if="uploading"><a-spin size="small" /><span>正在导出中...</span></p>
    <p class="export-text" v-else><a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" /><span>导出成功！</span></p>
    <div v-show="!uploading" class="export-btn-box ant-modal-footer">
      <a-button @click="showUploadLoading = false">关闭</a-button>
      <a download :href="file" @click="showUploadLoading = false" class="export-btn ant-btn-primary ant-btn">
        下载
      </a>
    </div>
  </a-modal>
</template>
<script>
import { queryExportSuccess } from './common'
export default {
  props: {
    // 轮询总秒数,单位秒
    seconds: {
      type: Number,
      default: 180,
      required: false
    }
  },
  data() {
    return {
      showUploadLoading: false,
      file: '',
      uploading: true,
      timer: null
    }
  },
  methods: {
    show(result) {
      this.uploading = true
      this.showUploadLoading = true
      let seconds = this.seconds * 1000
      let that = this
      queryExportSuccess(this.timer, result, seconds, function(x, url) {
        console.log(x, url)
        if (url && x == 'done') {
          that.uploading = false
          that.file = url
        } else {
          console.log('解析失败')
          that.showUploadLoading = false
          // that.$message.warning('解析失败')
        }
        clearInterval(this.timer)
        this.timer = null
      })
    }
  }
}
</script>
<style lang="less" scoped>
.export-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto;
  font-size: 18px;
  span {
    margin-left: 12px;
    display: inline-block;
  }
}
.export-btn-box {
  display: flex;
  align-items: center;
  margin: 48px -24px -24px;
  justify-content: flex-end;
  .export-btn {
    display: block;
    margin-left: 12px;
  }
}
</style>

